<template>
  <div id="app">
    <h1>父组件</h1>
    <h1>{{msg}}</h1>
    <First />
  </div>
</template>

<script>
import First from "./components/First";
export default {
  name: "App",
  data() {
    return {
      msg: "动画片",
      lists: [
        {
          id: 1,
          title: "迪迦奥特曼"
        },
        {
          id: 2,
          title: "海底小纵队"
        },
        {
          id: 3,
          title: "小猪佩奇"
        }
      ]
    };
  },
  // 注册组件
  components: {
    First
  },
  methods: {},
  beforeCreate() {
    console.log("app beforeCreate");
  },
  created() {
    console.log("app created");
  },
  beforeMount() {
    console.log("app beforeMount");
  },
  mounted() {
    console.log("app mounted");
  },
  beforeUpdate() {
    console.log("app beforeUpdate");
  },
  updated() {
    console.log("app updated");
  }
};
/* 
vue声明周期钩子函数
beforeCreate
created
beforeMount
Mounted
前四个声明周期钩子函数一定会触发
beforeUpdate
updated
beforeDestroy
destroyed

父子组件的声明周期钩子的加载顺序
父组件的beforeCreate实例创建前->父组件的created实例创建后-》父组件的beforeMount挂着前-》子组件的beforeCreate created beforeMount mounted -》父组件mounted挂载后



*/
</script>

<style>
</style>
